<template>
	<view>
		<!-- 搜索框 -->
		<view class="custom-search-box">
			<!--uni-search-bar uni-ui当中封装好的组件  -->
			<uni-search-bar @input="input" :bgColor="bgColor" :focus="true" @clear="clear" :radius="80" cancelButton="none" placeholder='请输入搜索内容'></uni-search-bar>
		</view>
		
		<!-- 历史记录 -->
		<view class="history-box" v-if="searchList.length == 0">
			<view class="history-top">
				<text>搜索历史</text>
				<uni-icons type="trash" size="22" @click="clearHistoryList"></uni-icons>
			</view>
			<!-- 历史记录的列表 -->
			<view class="history-list">
				<!-- custom-style 自定义样式 -->
				<uni-tag class='tag' custom-style="border:none;color:#000000;font-size: 15px" inverted='true' :text="item" v-for="(item,index) in historyCom" :key='index' @click="goGoodsList(item)"></uni-tag>
			</view>
		</view>
		
		<!-- 搜索列表 -->
		<view class="search-list" v-else>
			<view class="search-item" v-for="(item,index) in searchList" :key='index' @click="goGoodsDetail(item.goods_id)">
				<view class="search-name">{{item.goods_name}}</view>
				<uni-icons type='right' size="20"></uni-icons>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {searchData} from "@/api/search_request.js";
	export default {
		data() {
			return {
				bgColor:'#ffffff',
				timer:null,
				//搜索的关键字
				keyword:'',
				//搜索下面展示的数据列表
				searchList:[],
				//历史记录
				historyList:[]
			};
		},
		onLoad(){
			this.historyList = JSON.parse(uni.getStorageSync( 'keyword') || '[]');
		},
		computed:{
			historyCom(){
				return [...this.historyList].reverse();
			}
		},
		methods:{
			input(e){
				// e指的就是uni search bar中的值
				//函数防抖  只执行最后一次
				clearTimeout(this.timer);
				this.timer = setTimeout(()=>{
					// console.log(e);
					//将关键字赋值  传递参数用
					this.keyword = e;
					this.getSearchList();
					//保存关键字
					this.saveHistoryList();
				},500)
			},
			async getSearchList(){
				//搜索框内必须有值才会发送请求
				if(this.keyword === ''){
					this.searchList = [];
					return
				}
				const {data:res} = await searchData(this.keyword);
				console.log(res);
				if(res.meta.status !== 200) return uni.$showMsg();
				this.searchList = res.message;
			},
			goGoodsDetail(goods_id){
				uni.navigateTo({
					url:'/fenbao_one/swiper_detail/swiper_detail?goods_id=' + goods_id
				})
			},
			clear(){
				this.searchList = []
			},
			//保存搜索的关键字
			saveHistoryList(){
				//set容器  去重
				const set = new Set(this .historyList);
				//添加前判断 是否存在this.keyword  有就删除
				set.delete(this.keyword);
				//添加
				set.add(this.keyword);
				//set容器  对象转数组
				this.historyList = Array.from(set);
				//持久化存储
				// JSON.stringify() 将普通数据类型转化为json类型
				// JSON.parse()  将json类型的数据转化为普通类型
				uni.setStorageSync('keyword',JSON.stringify(this.historyList));
			},
			clearHistoryList(){
				//清空页面的历史记录
				this.historyList = [];
				//清空本地存储中的历史记录
				uni.setStorageSync('keyword','[]');
			},
			goGoodsList(keyword){
				uni.navigateTo({
					url:'/fenbao_one/floor_list/floor_list?query=' + keyword
				})
			}
		}
	}
</script>

<style lang="scss">
	
.custom-search-box{
	height: 100rpx;
	background-color: #C00000;
}

.history-box{
	padding: 0 10px;
	.history-top{
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #C8C7CC;
		font-size: 28rpx;
	}
	.history-list{
		margin: 10px 0;
		// padding: 0 15px;
		display: flex;
		flex-wrap: wrap;
		.tag{
			margin: 10px;
		}
	}
}

.search-list{
	padding: 0 10px;
	.search-item{
		padding: 10px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ccc;
		.search-name{
			//单行显示  省略号
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 26rpx;
		}
	}
}
</style>
